<template>
  <div class="Vector">
<!--    <div class="dir">-->
<!--      <DirCatalogTo></DirCatalogTo>-->
<!--    </div>-->
    <div class="content">
<!--      <div class="broad">-->
<!--        <el-breadcrumb separator="/">-->
<!--          <el-breadcrumb-item >目录管理</el-breadcrumb-item>-->
<!--          <el-breadcrumb-item>成果清单</el-breadcrumb-item>-->
<!--            <el-breadcrumb-item  v-for="(item,index) in resetTextBreadCrumbsList" v-bind:key="index">{{ item }}</el-breadcrumb-item>-->
<!--        </el-breadcrumb>-->
<!--      </div>-->
      <div class="demo-input-suffix">
        <!--      <div id="datamove"><el-button type="danger" size="mini" @click="DataMigration"><i class="el-icon-upload el-icon&#45;&#45;left"></i>数据迁移</el-button> </div>-->
        <div class="searchBar">
          <div class="datamove" style="display: inline-block">
<!--            <download-excel-->
<!--              class="export-excel-wrapper"-->
<!--              :data="theDownloadTextDataInfos"-->
<!--              :fields="json_fields"-->
<!--              :name="xlname">-->
<!--              <el-link  href="http:\\www.baidu.com" target="view_window"  type="info" :underline="false" ><el-button v-has="'daochuqingdan'" type="goon" round size="medium"><i class="el-icon-download el-icon&#45;&#45;left"></i>数据导出</el-button></el-link>-->
<!--            </download-excel>-->
           <el-button v-has="'daochuqingdan'" @click="downloadText" type="goon" round size="medium"><i class="el-icon-download el-icon--left"></i>数据导出</el-button>

          </div>
          <span style="margin-left: 100px">环境管控单元编号</span>
          <el-input
            size="medium"
            width="100" v-model="requestParams.code" >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <span class="margin_left">行政单元</span>
          <el-select size="medium" v-model="requestParams.city" placeholder="请选择行政单元">
            <el-option v-for="(itme,index) in theOptions"  v-if="itme.isShow "   v-bind:key="index" :label="itme.name" v-bind:value="itme.name"></el-option>
          </el-select>
<!--          <el-input size="medium" v-model="requestParams.city">-->
<!--            <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--          </el-input>-->
<!--          <span class="margin_left">县级行政单元</span>-->
<!--          <el-input size="medium" v-model="requestParams.county">-->
<!--            <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--          </el-input>-->
          <el-button type="goon" round  @click="findTextDataByKeys"
                     size="medium"  icon="el-icon-search">
            查找
          </el-button>
          <el-button type="goon" round  @click="resetRequestParams"
                     size="medium"  icon="el-icon-refresh">
            重置
          </el-button>
        </div>

      </div>
      <div id="vectortable">
        <template>
          <el-table
            :data="theTextDataInfo"
            border
            :stripe="true"
            style="width: 100%"
            :row-style="{height:120+'px'}"
            height="100%"
            @selection-change="handleSelectionChange">
<!--            <el-table-column-->
<!--              type="selection"-->
<!--              width="50">-->
<!--            </el-table-column>-->
            <el-table-column
              fixed
              prop="ids"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
              prop="unitCode"
              label="环境管控单元编码"
              width="170">
            </el-table-column>
            <el-table-column
              prop="division"
              label="地州/师"
              width="170">
            </el-table-column>
            <el-table-column
              prop="unitName"
              header-align="unitName"
              label="环境管控单元名称"
              width="185">
            </el-table-column>
            <el-table-column
              prop="unitClassify"
              label="环境管控单元类型"
              width="150">
            </el-table-column>
            <el-table-column
              header-align="spaceRestrain"
              prop="spaceRestrain"
              label="空间布局约束"
              width="200">
            </el-table-column>
            <el-table-column
              header-align="pollutantRestrain"
              prop="pollutantRestrain"
              label="污染物排放管控"
              width="200">
            </el-table-column>
              <el-table-column
                header-align="environmentRestrain"
                prop="environmentRestrain"
                label="环境风险防控"
                width="200">
            </el-table-column>
              <el-table-column
                fixed="right"
                header-align="resourceUtilization"
                prop="resourceUtilization"
                label="资源开发效率要求"
                width="200">
              </el-table-column>
<!--            <el-table-column-->
<!--              fixed="right"-->
<!--              label="操作">-->
<!--              <template slot-scope="scope">-->
<!--                <el-button @click="handleClick(scope.row)" type="primary" size="mini"><i class="el-icon-info"></i></el-button>-->
<!--                <el-button-->
<!--                  size="mini"-->
<!--                  @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button>-->
<!--                <el-button-->
<!--                  size="mini"-->
<!--                  type="danger"-->
<!--                  @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
          </el-table>
        </template>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[15,20,30,50]"
            :page-size="15"
            layout="total, sizes, prev, pager, next, jumper"
            :total=theTextDataInfoTotal>
          </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import {createNamespacedHelpers} from 'vuex'
  const {mapGetters} = createNamespacedHelpers('dirmanage')
  import qs from 'qs'
  import DirCatalogTo from "./DirCatalogTo";
  export default {
    name: "TheVector",
    components:{
      // DirManagement,
      DirCatalogTo
    },

    data() {
      return {
        xlname : '环境管控单元成果清单.xls',
        currentPage1: 1,
        requestParams:{
          pageNumber:1,
          pageSize:15,
          code:'',
          city:'',
          county:''
        },
        json_fields:{
           '序号':'id',
           '环境管控单元编码':'unitCode',
           '环境管控单元名称':'unitName',
           '师级行政单位':"division",
           '县级行政单位':"regiment",
           '环境管控单元类型':'unitClassify',
           '空间布局约束':'spaceRestrain',
           '污染物排放管控':'pollutantRestrain',
           '环境风险防控':'environmentRestrain',
           '资源开发效率':'resourceUtilization',
        },
      };

    },
    computed:{
      // ...mapGetters(['dirDocumentId']),
      ...mapGetters(['theTextDataInfo']),
      ...mapGetters(['theTextDataInfoTotal']),
      ...mapGetters(['resetTextBreadCrumbsList']),
      ...mapGetters(['theOptions']),
      ...mapGetters(['theDownloadTextDataInfos'])
    },
    mounted() {
      this.requestParams.city = window.sessionStorage.getItem('shiName')
      this.$store.dispatch('dirmanage/getTextData',this.requestParams)
      this.$store.dispatch('dirmanage/getfindAllByDivision')
    },
    methods: {

       downloadText(){
        var params= {
          code:"",
          cityName:""
        }
        params.code = this.requestParams.code
        params.cityName = this.requestParams.city
        this.$http.get('/v1.0/resultIntegration/achievements/export?cityName='+ params.cityName +'&code='+params.code).then(
          response =>{
            console.log(response)
            if (response.data.status==='7000'){
              var downloadElement = document.createElement('a');
              // var href = window.URL.createObjectURL();
              // downloadElement.href = '服务器IP:端口'+ / /result-integration-server/ / + response.data.data;
              //  downloadElement.href = 'http://localhost:8803/' + response.data.data;
             //     downloadElement.href = 'http://10.16.11.240:15480/' + response.data.data;
                 downloadElement.href = 'https://10.226.77.11/fils/' + response.data.data;
              //  downloadElement.href = 'http://59.223.239.59:8803/' + response.data.data;
              downloadElement.download = '环境管控单元清单.xls';
              document.body.appendChild(downloadElement);
              downloadElement.click();
              document.body.removeChild(downloadElement);
              // window.URL.revokeObjectURL(href);
            }
          }
        )

      },
      findTextDataByKeys(){
        this.$store.dispatch('dirmanage/getTextData',this.requestParams)
      },
      resetRequestParams(){
         this.requestParams.code = ''
         this.requestParams.county =''
         this.requestParams.city = window.sessionStorage.getItem('shiName')
        this.$store.dispatch('dirmanage/getTextData',this.requestParams)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.requestParams.pageSize = val
        this.$store.dispatch('dirmanage/getTextData',this.requestParams)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.requestParams.pageNumber = val
        this.$store.dispatch('dirmanage/getTextData',this.requestParams)
      },

      handleSelectionChange(val) {
        console.log(val)
        this.selectData = val
      },
      handleClick(row) {
        console.log(row);
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      // DataMigration(){
      //   if (this.selectData.length) {
      //     alert(this.selectData)
      //   }
      //   else {
      //     this.$message.error('当前没有选中可迁移的数据')
      //   }
      // }
    }
  }
</script>

<style scoped lang="scss">
::v-deep .el-link.el-link--info:hover{
    color: #fff;
}
::v-deep .el-link.el-link--info{
    color: #606266
}
  .block{
    /*position: absolute;*/
    /*top: 90%;*/
    //padding-top: 10px;
  }
  ::v-deep .el-table td{
    padding: 12px 0 ;
  }
  .Vector{
    position: absolute;
    left: 15.5%;
    //height: 87%;
    top: 9.5%;
    bottom: 1.5%;
    width: 83.5%;
    /*background-color: #ffffff;*/
    border-radius: 8px;
  }
  .dir{
    position: absolute;
    width: 25%;
    height:100%;
    background-color: white;
    border-left:2px #E9EEF3 solid ;
    /*overflow: auto;*/
    border-radius: 8px;
    box-shadow: 0 0 5px #acc4fe;
  }
  .searchBar{
  ::v-deep .el-input__inner{
    border-radius: 45px;
  }
  }

  .content{
    //left:25.5%;
    position: absolute;
    height: 100%;
    width:100%;
    overflow: auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 5px #acc4fe;
  }
  .broad{
    position: absolute;
    width: 98%;
    display: inline-block;
    padding: 1%;
    color: black;
    font-size: 20px;
    border-bottom: 2px solid #e9eef3;
    background-color: #ffffff;
    border-radius: 8px 8px 0 0 ;
  }
  ::v-deep .el-breadcrumb{
    font-size: 16px;
    font-family: sans-serif;
  }
  #vectortable{
    position: absolute;
    top: 60px;
    width: 98%;
    padding: 1%;
    height: calc(100% - 13%);
  }
  .el-input{
    width: 15%!important;
  }
  .demo-input-suffix{
    position: absolute;
    top: 10px;
    background-color: #ffffff;
    padding: 10px;

  }
  #datamove{
    display: inline-block;
  }
  .searchBar{
    display: inline-block;
    //margin-left: 80px;
    ::v-deep .el-button:focus, .el-button:hover {
      color: #fff;
      border-color: #c6e2ff;
      background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
    }
    ::v-deep .el-button--goon:active {
      color: #fff;
      border-color: #c6e2ff;
      outline: 0;
    }
  }
  .searchBar > span{
    padding: 10px;
    font-size: 14px;
  }
  .margin_left{
    margin-left: 20px;
  }
  .el-button{
    margin-left: 20px;
    font-size: 14px!important;
  }

  ::v-deep .el-table__empty-text{
    line-height:44px
  }
  ::v-deep .el-table__empty-block{
    min-height: 44px;
  }

  ::v-deep .el-table__body-wrapper {
    /*height: 200px; !* 滚动条整体高 必须项 *!*/
    border-right: none;
    overflow-y: scroll;/* overflow-y为了不出现水平滚动条*/
  }
  ::v-deep .el-dialog--center .el-dialog__body{
    padding: 10px;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width:6px;/* 滚动条的宽高 必须项 */
    height: 5px;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #bfcbd9;/* 滚动条的宽 */
    border-radius: 3px;
  }
::v-deep .cell{
  max-height: 150px;
  overflow-y: auto !important;
  text-align: center;
}
::v-deep .cell::-webkit-scrollbar {
  width:6px !important;/* 滚动条的宽高 必须项 */
}
::v-deep .cell::-webkit-scrollbar-thumb {
  background-color: #bfcbd9 !important;/* 滚动条的宽 */
  border-radius: 3px !important;
}
</style>
